<template>
  <!-- 预览界面 -->
  <div id="render-app" @mousewheel="mouseWheel">
    <div v-if="configData.layer" id="render-box" ref="imageTofile" v-loading="loadingContro" :element-loading-text="loadingText"
         :style="layerStyle" class="topo-render" @mousedown="mouseDown"
         @mouseenter="mouseEnter" @mouseleave="mouseLeave" @mousemove="mouseMove" @mouseup="mouseUp" @contextmenu.prevent="onContextmenu">
      <template>
        <div v-for="(component,index) in configData.components" v-show="component.style.visible == undefined ? true : component.style.visible"
             :key="index"
             :class="{ 'topo-render-wrapper-clickable': component.action.length > 0 }"
             :style="{
                        left: component.style.position.x + 'px',
                        top: component.style.position.y + 'px',
                        width: component.style.position.w + 'px',
                        height: component.style.position.h + 'px',
                        backgroundColor: (component.type == 'flow-bar' || component.type == 'flow-bar-dynamic') ? 'transparent' : component.style.backColor,
                        zIndex: component.style.zIndex,
                        transform: component.style.transformType,
                        opacity: component.style.opacity,
                        'border-radius': component.style.borderRadius + 'px',
                        'box-shadow': '0 0 ' + component.style.boxShadowWidth + 'px 0 ' + component.style.boxShadowColor
                    }" class="topo-render-wrapper" v-on:[getEvent(component)]="throttle(component)">
          <component v-bind:is="parseView(component)" ref="spirit" :detail="component"/>
        </div>
      </template>
    </div>
    <Mqtt ref="mqttUtil" @mqttAccept="mqttAccept"/>
    <el-dialog :close-on-click-modal="false" :title="windowPage" :visible.sync="childPage" :width="windowWidth + 'px'"
               append-to-body>
      <iframe :src="childUrl" :style="{ width: windowWidth - 40 + 'px', height: windowHeight + 'px' }"></iframe>
    </el-dialog>
  </div>
</template>

<script>
import TopoBase from './TopoBase';
import topoUtil from '@/views/zutai/components/topo/util/topo-util';
import Mqtt from "@/views/zutai/components/mqtt";
import {mapMutations} from 'vuex'
import {toPng} from 'html-to-image'
import request from '@/utils/request';

export default {
  name: 'TopoRender',
  extends: TopoBase,
  components: {
    Mqtt
  },
  props: {
    defaultValue: Number,
    isShare: Boolean
  },
  computed: {
    layerStyle: function () {
      var styles = [];
      styles = [`transform:scale(${this.selectedValue / 100})`];
      if (this.configData.layer.backColor) {
        styles.push(`background-color: ${this.configData.layer.backColor}`);
      }
      if (this.configData.layer.backgroundImage) {
        styles.push(`background-image: url("${this.configData.layer.backgroundImage}")`);
      }
      if (this.configData.layer.width > 0) {
        styles.push(`width: ${this.configData.layer.width}px`);
      }
      if (this.configData.layer.height > 0) {
        styles.push(`height: ${this.configData.layer.height}px`);
      }
      styles.push('overflow:hidden')
      var style = styles.join(';');
      return style;
    },
  },
  data() {
    return {
      eventName: 'click',
      configData: {},
      num: null,
      selectedValue: this.defaultValue,
      width: 0,
      height: 0,
      ztTimer: null,
      ishow: true,
      keyVertical: 0,
      loadingContro: false,
      loadingText: '指令下发中...',
      bindList: [],
      time: null,
      ztGuid: "",
      childPage: false,
      childUrl: '',
      windowWidth: '960',
      windowHeight: '600',
      windowPage: '子界面',
      key: 0,
      newZoom: 0.2,
      displacement: {
        scale: 1
      },
      throttleTimer: null,
      orderSendTimer: null,
      isOnline: false,
      deviceTimer: null,
      notifyShow: false,
      isFullscreen: false,
      x: 0,
      y: 0,
      l: 0,
      t: 0,
      operateDom: '',
      pageToken: ''
    }
  },
  methods: {
    //获取v-on事件
    getEvent(component) {
      if (component.dataBind.event) {
        return component.dataBind.event;
      } else {
        return 'click';
      }
    },
    //下载图片
    downloadImage(url) {
      // 如果是在网页中可以直接创建一个 a 标签直接下载
      let a = document.createElement('a')
      a.href = url
      a.download = document.title
      a.click()
    },
    htmlToImage() {
      toPng(this.$refs.imageTofile)
          .then(dataUrl => {
            this.downloadImage(dataUrl)
          })
          .catch(error => {
            console.error('oops, something went wrong!', error)
          })
    },
    mouseLeave(e) {
      // console.log('鼠标离开了');
      this.operateDom = 'default'
    },
    mouseEnter(e) {
      // console.log('鼠标进来了');
      this.operateDom = 'default'
    },
    mouseDown(e) {
      e.stopPropagation()
      e.preventDefault()
      let idDown = document.getElementById('render-box')
      idDown.style.cursor = "pointer"
      // console.log(this.x,this.y,this.l,this.t);
      this.x = e.clientX
      this.y = e.clientY
      this.l = idDown.offsetLeft
      this.t = idDown.offsetTop
      this.operateDom = 'render-box'
    },
    mouseMove(e) {
      e.preventDefault()
      if (!this.configData.layer.dragZoom) {
        return;
      }
      let point = document.getElementById('render-box')
      // console.log('鼠标移动',e);
      if (this.operateDom == 'render-box') {
        let nx = e.clientX  // 随着 缩放，这个值是变的
        let ny = e.clientY  // 随着 缩放，这个值是变的

        let nl = nx - (this.x - this.l)
        let nt = ny - (this.y - this.t)

        point.style.left = nl + 'px'
        point.style.top = nt + 'px'
        sessionStorage.setItem('boxLeft-' + this.ztGuid, point.style.left);
        sessionStorage.setItem('boxTop-' + this.ztGuid, point.style.top);
        e.stopImmediatePropagation()
      }
    },
    mouseWheel(e) {  // 滚动事件
      if (!this.configData.layer.dragZoom) {
        return;
      }
      if (e.wheelDelta >= 120) {
        this.selectedValue = this.selectedValue + 10
      } else if (e.wheelDelta <= -120) {
        if (this.selectedValue > 30) {
          this.selectedValue = this.selectedValue - 10
        }
      }
      // console.log('缩放',this.selectedValue);
      this.saveSf();
    },
    mouseUp(e) {
      this.operateDom = 'default'
      if (e.target.id) {
        let idDoc = document.getElementById(e.target.id)
        idDoc.style.cursor = "default"
      }
    },
    initLeftTop() {
      if (!this.configData.layer.dragZoom) {
        let renderApp = document.getElementById('render-app')
        renderApp.style.overflowY = 'auto'
        renderApp.style.overflowX = 'auto'
        return;
      }
      let renderApp = document.getElementById('render-app')
      renderApp.style.overflow = 'hidden'
      if (sessionStorage.getItem('boxLeft-' + this.ztGuid) != 'undefined') {
        let point = document.getElementById('render-box')
        point.style.left = sessionStorage.getItem('boxLeft-' + this.ztGuid);
        point.style.top = sessionStorage.getItem('boxTop-' + this.ztGuid)
      }
    },
    getInitData() {
      let param = {
        ztGuid: this.ztGuid
      }
      let url = "/zutai/bDeviceRealData/getInitData"
      request({
        url: url,
        method: "get",
        headers: {
          Authorization: "Bearer " + this.pageToken,
        },
        params: param,
      }).then((res) => {
        //let ztData=JSON.parse()
        // console.log("组态初始化数据",res.data);
        res.data.forEach(element => {
          this.setMqttData(element)
        });
      })
    },
    clickFullscreen() {
      let element = document.getElementById('render-app');//指定全屏区域元素
      if (element.requestFullscreen) {
        element.requestFullscreen();
      } else if (element.webkitRequestFullScreen) {
        element.webkitRequestFullScreen();
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
      } else if (element.msRequestFullscreen) {
        // IE11
        element.msRequestFullscreen();
      }
    },
    onContextmenu(event) {
      this.$contextmenu({
        items: [{
          label: "图片生成",
          divided: true,
          icon: "el-icon-download",
          onClick: () => {
            //this.toImage();
            this.htmlToImage()
          }
        }, {
          label: "全屏展示",
          icon: "el-icon-full-screen",
          onClick: () => {
            this.clickFullscreen();
          }
        }, {
          label: "重新加载",
          divided: true,
          icon: "el-icon-refresh",
          onClick: () => {
            this.$router.go(0)
          }
        }
        ],
        event, // 鼠标事件信息
        customClass: "custom-class", // 自定义菜单 class
        zIndex: 9999, // 菜单样式 z-index
        minWidth: 230 // 主菜单最小宽度
      });

      return true;
    },
    ...mapMutations('topoEditor', [
      'setMqttData'
    ]),
    getDeviceRealStatus() {
      let query = {
        deviceMac: this.$route.query.deviceImei
      }
      let url = "/zutai/bDeviceManager/getDeviceStatus"
      request({
        url: url,
        method: "get",
        headers: {
          Authorization: "Bearer " + this.pageToken,
        },
        params: query,
      }).then((res) => {
        this.isOnline = res.data;
      }).catch(err => {
      })
    },
    //保存缩放
    saveSf() {
      sessionStorage.setItem('selectedValue-' + this.$route.query.guid, this.selectedValue);
    },
    parseView(component) {
      console.log(component)
      return topoUtil.parseViewName(component);
    },
    //点击节流
    throttle(component) {
      if (this.throttleTimer) {
        clearTimeout(this.throttleTimer)
      }
      let that = this;
      this.throttleTimer = setTimeout(() => {
        that.doClickComponent(component);
      }, 200);
    },
    doClickComponent(component) {
      if (component.componentShow && component.componentShow.indexOf('单击') > -1 && component.dataBind.djAction) {
        // console.log('组件点击')
        if (component.dataBind.action == '外部链接') {
          window.open(component.dataBind.redirectUrl)
        } else if (component.dataBind.action == '组态界面') {
          //当前页面打开
          if (component.dataBind.openModel == '1') {
            if (component.dataBind.ztPage) {
              this.ztGuid = component.dataBind.ztPage;
              const routeUrl = this.$router.resolve({
                query: {
                  guid: this.ztGuid,
                  deviceImei: component.dataBind.deviceImei
                }
              })
              const ip = window.location.host
              window.location.href = "http://" + ip + "/" + routeUrl.href;
              // 跳转后立即刷新页面
              window.location.reload();
            } else {
              this.$message('无绑定组态界面');
            }
          } else if (component.dataBind.openModel == '2') {
            if (component.dataBind.ztPage) {
              this.ztGuid = component.dataBind.ztPage;
              const routeUrl = this.$router.resolve({
                path: '/fullscreen',
                query: {
                  guid: this.ztGuid,
                  deviceImei: component.dataBind.deviceImei
                }
              })
              // console.log("打开新窗口");
              window.open(routeUrl.href, '_blank');
            } else {
              this.$message('无绑定组态界面');
            }
          } else {
            if (component.dataBind.ztPage) {
              this.ztGuid = component.dataBind.ztPage;
              this.childPage = true;
              if (component.dataBind.windowHeight) {
                this.windowHeight = component.dataBind.windowHeight
              }
              if (component.dataBind.windowWidth) {
                this.windowWidth = component.dataBind.windowWidth
              }
              this.windowPage = component.dataBind.ztPageName
              // let ip = this.topoUtil.getServerIp;
              const ip = window.location.host
              this.childUrl = 'http://' + ip + ':10066/fullscreen?guid=' + this.ztGuid
                  + "&deviceImei=" + component.dataBind.deviceImei + "&t=" + new Date().getTime()
            } else {
              this.$message('无绑定组态界面');
            }
          }
        } else if (component.dataBind.action == '操作变量') {
          if (component.dataBind.paramValue) {
            this.controChange(component.dataBind);
          } else {
            let tipMsg = '提示：请输入变量值'
            if (component.dataBind.tipMsg) {
              tipMsg = '提示：' + component.dataBind.tipMsg
            }
            this.$prompt(tipMsg, component.dataBind.paramName, {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              closeOnClickModal: false,
              closeOnPressEscape: false,
              inputValue: component.dataBind.paramValue == '' ? '0' : component.dataBind.paramValue,
              inputErrorMessage: '变量值不能为空',
              inputValidator: (value) => {       // 点击按钮时，对文本框里面的值进行验证
                if (!value) {
                  return '变量值不能为空';
                }
                if (isNaN(value)) {
                  return '变量值必须是数字'
                }
              },
            }).then(({value}) => {
              component.dataBind.paramValue = value
              this.controChange(component.dataBind);
              component.dataBind.paramValue = '';
            })
          }
        } else if (component.type == 'imageSwitch' && component.dataBind.paramField) {
          if (component.dataBind.controValue == '0关1开' && component.dataAction.actualValue == '关') {
            component.dataBind.paramValue = '1';
            this.controChange(component.dataBind);
          } else if (component.dataBind.controValue == '0开1关' && component.dataAction.actualValue == '关') {
            component.dataBind.paramValue = '0';
            this.controChange(component.dataBind);
          } else if (component.dataBind.controValue == '0关1开' && component.dataAction.actualValue == '开') {
            component.dataBind.paramValue = '0';
            this.controChange(component.dataBind);
          } else if (component.dataBind.controValue == '0开1关' && component.dataAction.actualValue == '开') {
            component.dataBind.paramValue = '1';
            this.controChange(component.dataBind);
          } else if (component.dataBind.controValue == '多态开关') {
            //多态开关按照状态开关以此下发
            let paramIndex = 0
            component.dataBind.stateList.forEach((element, index) => {
              if (element.paramData == component.dataBind.paramValue) {
                if (index + 1 == component.dataBind.stateList.length) {
                  paramIndex = 0
                } else {
                  paramIndex = index + 1;
                }
              }
            });
            component.dataBind.paramValue = component.dataBind.stateList[paramIndex].paramData;
            this.controChange(component.dataBind);
          } else {
            component.dataBind.paramValue = '0';
            this.controChange(component.dataBind);
          }
        } else if (component.dataBind.action == '变量信息') {
          console.log(component.dataBind);
          if (!component.dataBind.imei || !component.dataBind.paramField) {
            return;
          }
          let queryParams = {
            pageNum: 1,
            pageSize: 1,
            deviceImei: component.dataBind.imei,
            paramField: component.dataBind.paramField,
          }
          let url = "/zutai/bDeviceRealData/list"
          request({
            url: url,
            method: "get",
            params: queryParams,

          }).then((res) => {
            if (res.rows.length > 0) {
              let deviceDetail = res.rows[0];
              var infoContent = `<div>` +
                  `<p>设备编号：` + deviceDetail.deviceImei + `</p>` +
                  `<p>设备名称：` + deviceDetail.deviceName + `</p>` +
                  `<p>变量名称：` + deviceDetail.paramName + `</p>` +
                  `<p>实时数据：` + (deviceDetail.paramValue == null ? 0 : deviceDetail.paramValue) + (deviceDetail.paramUnit == null ? '' : deviceDetail.paramUnit) + `</p>` +
                  `</div>`;
              this.$notify({
                title: '变量信息',
                dangerouslyUseHTMLString: true,
                message: infoContent,
                duration: 3000
              });
            }
          })

        } else if (component.dataBind.action == '函数定义') {
          const func = component.dataBind.function;
          const customFn = new Function(func)
          customFn()
        } else if (component.dataBind.action == '组件显示') {

          this.configData.components.forEach(element => {
            if (this.intersection(element.identifiers, component.dataBind.identifiers).length > 0) {
              element.style.visible = true;
            } else if (element.identifier.indexOf(component.dataBind.identifiers) > -1) {
              element.style.visible = true;
            }
          });
        } else if (component.dataBind.action == '组件隐藏') {
          this.configData.components.forEach(element => {
            if (this.intersection(element.identifiers, component.dataBind.identifiers).length > 0) {
              element.style.visible = false;
            } else if (element.identifier.indexOf(component.dataBind.identifiers) > -1) {
              element.style.visible = false;
            }
          });
        }
      }
    },
    //数据是否有交集
    intersection(arr1, arr2) {
      const result = [];
      if (arr1 && arr1) {
        for (let i = 0; i < arr1.length; i++) {
          if (arr2.includes(arr1[i])) {
            result.push(arr1[i]);
          }
        }
      }
      return result;
    },
    // 判断是在手机还是电脑
    isMobile_pc() {
      let flag = navigator.userAgent.match(
          /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      );
      return flag;
    },
    // 判断是在安卓还是ios打开
    is_andriod_ios() {
      var u = navigator.userAgent;
      return {
        //移动终端浏览器版本信息
        trident: u.indexOf("Trident") > -1, //IE内核
        presto: u.indexOf("Presto") > -1, //opera内核
        webKit: u.indexOf("AppleWebKit") > -1, //苹果、谷歌内核
        gecko: u.indexOf("Gecko") > -1 && u.indexOf("KHTML") == -1, //火狐内核
        mobile:
            !!u.match(/AppleWebKit.*Mobile/i) ||
            !!u.match(
                /MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/
            ), //是否为移动终端
        ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
        android: u.indexOf("Android") > -1 || u.indexOf("Linux") > -1, //android终端或者uc浏览器
        iPhone: u.indexOf("iPhone") > -1 || u.indexOf("Mac") > -1, //是否为iPhone或者QQHD浏览器
        iPad: u.indexOf("iPad") > -1, //是否iPad
        webApp: u.indexOf("Safari") == -1, //是否web程序，没有头部与底部
      };
    },
    getZtData() {
      let query = {
        deviceMac: this.$route.query.deviceImei,
        guid: this.ztGuid,
      }
      let url = "/zutai/bDeviceZt/getZtData"
      request({
        url: url,
        method: "get",
        headers: {
          Authorization: "Bearer " + this.pageToken,
        },
        params: query,
      }).then((res) => {
        let ztData = res.data
        console.log("格式化数据", res);
        this.configData = JSON.parse(ztData.deviceZtData);
        console.log("格式化数据", this.configData);
        //修改title值
        document.title = ztData.pageName
        this.isOnline = ztData.isOnline;
        //双指缩放
        let that = this;
        // console.log("屏幕分辨率",window.screen.width,window.screen.height);
        if (window.screen.width < this.configData.layer.width) {
          that.selectedValue = 100;
          let rate = window.screen.width / that.configData.layer.width;
          document.body.style.width = window.screen.width;
          document.body.style.height = window.screen.height;
          document.body.style.transformOrigin = 'left top'
          document.body.style.transform = 'scale(' + rate + ')'
          that.newZoom = rate;
          // 获取放大或缩小的区域DOM
          document.body.addEventListener("touchstart", function (event) {
            var touches = event.touches;
            var events = touches[0];
            var events2 = touches[1];

            // event.preventDefault();

            // 第一个触摸点的坐标
            that.displacement.pageX = events.pageX;
            that.displacement.pageY = events.pageY;

            that.displacement.moveable = true;

            if (events2) {
              that.displacement.pageX2 = events2.pageX;
              that.displacement.pageY2 = events2.pageY;
            }
            that.displacement.originScale = that.displacement.scale || 1;
          });
          document.addEventListener("touchmove", function (event) {
            if (!that.displacement.moveable) {
              return;
            }

            event.preventDefault();

            var touches = event.touches;
            var events = touches[0];
            var events2 = touches[1];
            // 双指移动
            if (events2) {
              // 第2个指头坐标在touchmove时候获取
              if (!that.displacement.pageX2) {
                that.displacement.pageX2 = events2.pageX;
              }
              if (!that.displacement.pageY2) {
                that.displacement.pageY2 = events2.pageY;
              }

              // 双指缩放比例计算
              var zoom =
                  that.getDistance(
                      {
                        x: events.pageX,
                        y: events.pageY
                      },
                      {
                        x: events2.pageX,
                        y: events2.pageY
                      }
                  ) /
                  that.getDistance(
                      {
                        x: that.displacement.pageX,
                        y: that.displacement.pageY
                      },
                      {
                        x: that.displacement.pageX2,
                        y: that.displacement.pageY2
                      }
                  );
              // 图像应用缩放效果,使用定时器实现限流防抖

              if (that.ztTimer) {
                clearTimeout(that.ztTimer)
              }
              that.ztTimer = setTimeout(() => {
                // console.log("zoom",zoom);
                if (zoom > 1) {
                  that.newZoom = that.newZoom + 0.1
                  if (that.newZoom > 0.8) {
                    that.newZoom = 0.8;
                  }
                } else {
                  that.newZoom = that.newZoom - 0.1
                  if (that.newZoom < 0.2) {
                    that.newZoom = 0.2
                  }
                }
                document.body.style.transform = 'scale(' + that.newZoom + ')'
                // console.log("newZoom",that.newZoom);
                // console.log("当前缩放比例",document.body.style.zoom);
              }, 100);
            }
          });
        } else {
          //缩放
          if (sessionStorage.getItem('selectedValue-' + this.$route.query.guid) != 'undefined') {
            this.selectedValue = Number(sessionStorage.getItem('selectedValue-' + this.$route.query.guid));
            if (this.selectedValue < 30) {
              this.selectedValue = 100;
            }
          } else if (this.defaultValue) {
            this.selectedValue = this.defaultValue;
          }
          setTimeout(() => {
            this.initLeftTop();
          }, 200);
        }
        // console.log("格式化数据",this.configData);

      })
    },
    controChange(item) {
      if (this.isOnline == false) {
        this.showMessage('warning', '设备不在线,无法设置！')
        return;
      }
      let data = {
        paramField: item.paramField,
        deviceImei: item.imei,
        paramName: item.paramName,
        driveName: item.driveName != {} ? null : item.dataType,
        paramValue: item.paramValue,
        dataType: item.dataType != {} ? null : item.dataType
      };
      let url = "/zutai/bDeviceRealData/orderSend"
      request({
        url: url,
        method: "post",
        data: data,
      }).then((res) => {
        this.showMessage('success', '指令下发成功')
      }).catch(res => {
        // console.log("指令下发失败",res.msg);
        this.loadingContro = false;
      });

    },
    showMessage(type, msg) {
      this.$notify({
        title: '操作成功',
        message: msg,
        type: type,
        duration: 800
      });
    },
    mqttAccept(ztData) {
      // console.log("子组件传递父组件的消息",ztData);
      this.setMqttData(ztData)
    },
    getDistance(start, stop) {
      // Math.hypot()计算参数的平方根
      return Math.hypot(stop.x - start.x, stop.y - start.y);
    },
  },
  created() {
  },
  mounted() {
    this.$notify({
      title: '温馨提示',
      message: '键盘按下F11键或右键开启全屏，按下Esc退出全屏。',
      position: 'top-left',
      duration: 5000
    });
    this.ztGuid = this.$route.query.guid;
    this.pageToken = this.$route.query.accessToken;
    console.log(this.$route.query, '路由信息')
    this.getZtData();
    this.getInitData();
  },
  beforeDestroy() {
    clearInterval(this.ztTimer)
    this.ztTimer = null;
    clearInterval(this.deviceTimer)
    this.deviceTimer = null;
  },
}
</script>

<style lang="scss" scoped>
#render-app {
  position: absolute;
  // overflow: hidden;
  width: 100vw;
  height: 100vh;
  transform-origin: center top;
}

.topo-render {
  overflow: auto;
  background-color: #ffffff;
  background-clip: padding-box;
  background-origin: padding-box;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 100%;
  position: absolute;

  .topo-render-wrapper {
    position: absolute;
    animation: fadeIn 0.8s ease-in-out;
  }

  /* 定义动画关键帧 */
  @keyframes fadeIn {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }
  @keyframes fadeOut {
    0% {
      opacity: 1;
    }

    100% {
      opacity: 0;
    }
  }

  .topo-render-wrapper-clickable {
    cursor: pointer;
  }
}

.sfClass {
  height: 40px;
  position: fixed;
  // background-color:white;
  top: 20px;
  right: 15px;
}
</style>
<style>
.offLineNotification {
  top: 10% !important;
  right: 16px !important;
  background: #E6A23C !important;
  width: 230px !important;
  height: 80px !important;
  /* border: 1px solid #43dcff !important; */
}

h2 {
  line-height: 1.1;
}

.el-message-box__message {
  color: #E6A23C !important;
}

body {
  -webkit-text-size-adjust: 100% !important;
}
</style>
<style>
::-webkit-scrollbar-thumb {
  background-color: #e1e1e1;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #a5a2a2;
}

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  position: absolute;
}

::-webkit-scrollbar-track {
  background-color: #fff;
}
</style>
